
let allstate = false  //false单选 true全选
//1.取出本地商品信息
let list = localStorage.getItem('ipm')
let cartlist = JSON.parse(list) || []
// 渲染商品
function showcart() {
    //2.渲染商品
    let tr = ` <tr>
                <th><input type="checkbox" name="checkall"  ${allstate == true ? 'checked' : ''}></th>
                <th>商品id</th>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>操作</th>
            </tr>`
    let str = cartlist.map(item => {
        return `<tr>
                <td><input type="checkbox" name="check" ${item.state == true ? 'checked' : ''} dex="${item.id}"></td>
                <td>${item.id}</td>
                <td><img src="${item.url}" alt=""></td>
                <td>${item.name}</td>
                <td>${item.price}</td>
                <td>
                    <input type="button" value="-" name="minus" dex="${item.id}" ${item.num == 0 ? 'disabled' : ''} >
                    <input type="text" name="amount" value="${item.num}" > 
                    <input type="button" value="+" name="plus" dex="${item.id}">
                </td>
                <td class="all">${(item.price * item.num).toFixed(2)}</td>
                <td>
                    <a href="#">移入收藏</a><br />
                    <a href="#" class="del" dex="${item.id}">删除</a>
                </td>
            </tr>
          `
    }).join('')
    tr = tr + str
    $('table').html(tr)
}
showcart()
//加一操作
function addNum() {
    $('table').on('click', 'input[value="+"]', function () {
        let dexVal = $(this).attr('dex')  //获取+号的dex属性
        let product = cartlist.find(item => {
            return dexVal == item.id
        })
        product.num++
        localStorage.setItem('ipm', JSON.stringify(cartlist)) //将变动的数量和价格存入数据中
        showcart()
        allPrcie()
    })
}
addNum()
//减一操作
function delNum() {
    $('table').on('click', 'input[value="-"]', function () {
        let dexVal = $(this).attr('dex')  //获取+号的dex属性
        let product = cartlist.find(item => {
            return dexVal == item.id
        })
        product.num--
        localStorage.setItem('ipm', JSON.stringify(cartlist)) //将变动的数量和价格存入数据中

        showcart()
        allPrcie()
    })
}
delNum()

//移除 
function cleanlist() {
    $('table').on('click', '.del', function () {
        let dexVal = $(this).attr('dex')  //获取+号的dex属性
        let is = cartlist.findIndex(function (item, index) {
            return dexVal == item.id
        })
        cartlist.splice(is, 1)
        localStorage.setItem('ipm', JSON.stringify(cartlist)) //将变动的数量和价格存入数据中
        //重新渲染
        showcart()
        allPrcie()
    })
}
cleanlist()
//计算总价
function allPrcie() {
    let cartlist = localStorage.getItem('ipm')
    cartlist = JSON.parse(cartlist) || []
    let sum = 0
    for (let i = 0; i < cartlist.length; i++) {
        if (cartlist[i].state == true) {
            let singlePrice = cartlist[i].price * cartlist[i].num
            sum = sum + Number(singlePrice)
        }
    }
    $('.allprice span').html(`￥${sum.toFixed(2)}`)
}
// //初始总价
allPrcie()
//全选
function stateall() {
    $('table').on('click', 'input[name="checkall"]', function () {
        allstate = !allstate
        cartlist.forEach(item => {
            item.state = allstate
        })
        localStorage.setItem('ipm', JSON.stringify(cartlist)) //将变动的数量和价格存入数据中  
        showcart()
        allPrcie()
    })
}
stateall()
//单选
function onlystate() {
    $('table').on('click', 'input[name="check"]', function () {
        let dexVal = $(this).attr('dex')  //获取+号的dex属性
        let product = cartlist.find(item => {
            return dexVal == item.id
        })
        product.state = !product.state    //点击该选项出现相应样式
        //当全部选中时全选框被选中
        allstate = cartlist.every(item => {
            return item.state == true
        })
        localStorage.setItem('ipm', JSON.stringify(cartlist)) //将变动的数量和价格存入数据中  
        showcart()
        allPrcie()
    })
}
onlystate()
//返回首页
function bank() {
    $('header>button').on('click', function () {
        location.href = '../pages/index.html'
    })
}
bank()